<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
		<title>Browser User-Agent Analysis Tool Browser.js</title>
		<link rel="bookmark" href="../favicon.ico">
        <link rel="shortcut icon" type="image/ico" href="../favicon.ico" sizes="16x16">
		<script src="../src/browser.js"></script>
		<!-- <script src="../dist/browser.min.js"></script> -->
		<style>
			a{
				text-decoration: none;
    			color: #757575;
			}
			a:hover{
				text-decoration: underline;
			}
			.wrapper{
				width: 100%;
				max-width: 1366px;
				margin: 0 auto;
			}
			.container{
				margin-bottom: 20px;
			}
			.footer{
				line-height: 40px;
				text-align: right;
			}
			.footer a{
				margin: 0 5px;
			}
			.module table{
				width: 100%;
				table-layout: fixed;
				border-collapse: collapse;
    			border-spacing: 0;
				text-align: center;
			}
			.module thead,.browser_ua{
				background: #eee;
			}
			.module th,.module td{
				padding: 8px 5px;
				line-height: 24px;
				border: 1px solid #eee;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="container">
				<div class="module">
					<script>
						let info = new Browser();
						if(info.device!='Mobile'){
							document.writeln('<table>\
								<caption><p class="browser_ua">'+navigator.userAgent+'</p></caption>\
								<thead>\
									<tr>\
										<th>浏览器</br>Browser</th>\
										<th>版本</br>Version</th>\
										<th>内核</br>Engine</th>\
										<th>操作系统</br>OS Version</th>\
										<th>设备</br>Device</th>\
										<th>语言</br>Language</th>\
										<th>分辨率</br>Resolution</th>\
										<th>Enable Cookie</th>\
									</tr>\
								</thead>\
								<tbody>\
									<tr>\
										<td>'+info.browser+'</td>\
										<td>'+info.version+'</td>\
										<td>'+info.engine+'</td>\
										<td>'+info.os+' '+info.osVersion+'</td>\
										<td>'+info.device+'</td>\
										<td>'+info.language+'</td>\
										<td>'+info.osWidth+'*'+info.osHeight+'</td>\
										<td>'+info.cookieEnabled+'</td>\
									</tr>\
								</tbody>\
							</table>');
						}else{
							document.writeln('<table>\
								<caption><p class="browser_ua">'+navigator.userAgent+'</p></caption>\
								<thead>\
									<tr>\
										<th>浏览器</th>\
										<th>版本</th>\
										<th>内核</th>\
									</tr>\
								</thead>\
								<tbody>\
									<tr>\
										<td>'+info.browser+'</td>\
										<td>'+info.version+'</td>\
										<td>'+info.engine+'</td>\
									</tr>\
								</tbody>\
							</table>');
							document.writeln('<table>\
								<thead>\
									<tr>\
										<th>操作系统</th>\
										<th>设备</th>\
										<th>语言</th>\
									</tr>\
								</thead>\
								<tbody>\
									<tr>\
										<td>'+info.os+' '+info.osVersion+'</td>\
										<td>'+info.device+'</td>\
										<td>'+info.language+'</td>\
									</tr>\
								</tbody>\
							</table>');
							document.writeln('<table>\
								<thead>\
									<tr>\
										<th>分辨率</th>\
										<th>Enable Cookie</th>\
									</tr>\
								</thead>\
								<tbody>\
									<tr>\
										<td>'+info.osWidth+'*'+info.osHeight+'</td>\
										<td>'+info.cookieEnabled+'</td>\
									</tr>\
								</tbody>\
							</table>');
						};
						console.info(info);
					</script>
				</div>
			</div>
			<div class="footer">
				<a href="https://github.com/yanbog/browser" target="_blank">项目地址</a>
			</div>
		</div>
		
	</body>
</html>
